<template>
<div>
    <svg id="svgobj" width="100%" height="100%" x="0" y="0" >
		<rect width="1" pointer-events="all" height="1" :x="x" :y="y" style="fill:rgb(0,255,255);stroke-width:1;stroke:rgb(0,0,0);cursor:nw-resize;" id="rectobj1" ></rect>
   </svg>
 </div>
</template>

<script>
import rotate from '../assets/rotate.png'
let svgobj;
//let rectobj; 
export default { 
  name: "TestSvg",
  data(){
	return {
		rotate,
		rotateStyle:'',
		svgNS : 'http://www.w3.org/2000/svg',
		x:100,
		y:100,
		clickrect:false,
	}
  },
  mounted() {
     debugger;
    window["handleDrag"] = (evt) => {
      this.drag(evt);
    };
	svgobj =  document.getElementById('svgobj');
	//svgobj.onmousemove = this.mousemove;
	
	window["handleMouseDown"] = (evt, id) => {
      this.handleMouseDown(evt, id);
    };
	window["handleMouseMove"] = (evt, id) => {
      this.handleMouseMove(evt, id);
    };
	window["handleMouseUp"] = (evt, id) => {
      this.handleMouseUp(evt, id);
    };
	svgobj.setAttribute("onmousedown", "handleMouseDown(evt,'1')");
	svgobj.setAttribute("onmousemove", "handleMouseMove(evt,'1')");
	svgobj.setAttribute("onmouseup", "handleMouseUp(evt,'1')");
  },
  methods: {
    drag(e){
	  var x = e.clientX||e.clientX||0;
	  var y = e.clientY||e.clientY||0;
	  console.log('drag x:'+x+',y:'+y);
 	 
	},
   // svg图元件点击事件
   svgClick(evt, id) {
      console.log(evt);
      alert(id);
   },
   mousemove(e){
	  var x = e.clientX||e.clientX||0;
	  var y = e.clientY||e.clientY||0;
	  console.log('x:'+x+',y:'+y);
   },
   click(e){
        var pt;
		debugger;
		pt = this.getEventPosition(e);
		
        var oCircle = this.createTag('circle',{cx:pt.x,cy:pt.y,r:10,stroke:"black",
		"stroke-width":"1",fill:"red"});
         
         svgobj.appendChild(oCircle);
   },
       //获取事件位置
    getEventPosition(ev) {
      var x, y;
	  if (ev.offsetX || ev.offsetX == 0) {
        // Opera
        x = ev.offsetX;
        y = ev.offsetY;
      } else  if (ev.layerX || ev.layerX == 0) {
        x = ev.layerX;
        y = ev.layerY;
      }  
      return { x: x, y: y };
    },
     /* 封装一个创建标签的函数 */
   createTag(tag,objAttr)
     {
       var oTag = document.createElementNS(this.svgNS,tag);
    
       for(var attr in objAttr)
       {
           oTag.setAttribute(attr,objAttr[attr]);
       }
       return oTag;
     },
   //把柄按下事件
	handleMouseDown(evt,id){
	 //debugger;
	 let pt = this.getEventPosition(evt);
	 if(pt.x>=this.x && pt.x <=this.x+1 && pt.y>=this.y && pt.y<=this.y+1){
		console.log('click to rect');
		this.clickrect = true;
	 }else{
	   this.clickrect = false;
	   console.log("handleMouseDown:"+JSON.stringify(evt)+","+id);
	 }
	},
	//把柄移动事件
	handleMouseMove(evt){
	 // console.log("handleMouseMove:"+evt);
	  //let dx = evt.x-this.clickedPt.x;
	  //let dy = evt.y - this.clickedPt.y;
	   
	  //this.$emit("movehandler",this.item.id,this.handleType,dx,dy);
	  if(this.clickrect){
		let pt = this.getEventPosition(evt);
		this.x = pt.x;
		this.y = pt.y;
	  }
	},
	//把柄按键释放事件
	handleMouseUp(evt,id){
	  console.log("handleMouseUp:"+evt+","+id);
	  this.clickrect = false;
	},	
 } 
};
</script>

